<template>
  <div>
    <roofVue title="我的钱包"></roofVue>
    <van-grid class="row" column-num="3">
      <van-grid-item>
        <span>总资产(元)</span>
        <br />
        <span>{{ amount }}</span>
      </van-grid-item>
      <van-grid-item>
        <span>累计充值(元)</span>
        <br />
        <span>{{ chong }}</span>
      </van-grid-item>
      <van-grid-item>
        <span>累计消费(元)</span>
        <br />
        <span>{{ shangcheng }}</span>
      </van-grid-item>
    </van-grid>
    <van-cell-group style="margin: 10px">
      <van-cell icon="shop-o" title="充值￥100赠送￥10">
        <van-button type="danger" round size="small" style="width: 17vw" @click="chongzhi(100)">充值</van-button>
      </van-cell>
      <van-cell icon="shop-o" title="充值￥1赠送￥1000">
        <van-button type="danger" round size="small" style="width: 17vw" @click="chongzhi(1)">充值</van-button>
      </van-cell>
    </van-cell-group>
  </div>
</template>

<script>
import roofVue from "../other/roof.vue";
export default {
  data() {
    return {
      amount: 0,
      shangcheng: 0,
      chong: 0
    };
  },
  components: {
    roofVue,
  },
  created() {
    this.amount = this.Sto.Session.get("amount");
    this.get()
  },
  methods: {
    async chongzhi(num) {
      if (num == 1) {
        return this.$notify({ type: "warning", message: "此方案不合理" })
      }
      let res = await this.$post(this.url2 + "/account/recharge", {
        userId: this.$store.state.user.id,
        amount: num,
      });
      if (res.errorCode != "0") return this.$notify("充值失败");
      this.$notify({ type: "success", message: "充值成功" });
      this.amount += num;
      this.Sto.Session.set("amount", this.amount);
      this.get()
    },
    //查询累计
    get() {
      this.$post(this.url2 + "/account/selectData", {
        userId: this.$store.state.user.id,
        source: "商城消费"
      }).then(res => {
        // console.log(res);
        if (res.errorCode == '0') {
          this.shangcheng = Math.abs(res.data)
        }
      })
      this.$post(this.url2 + "/account/selectData", {
        userId: this.$store.state.user.id,
        source: "充值"
      }).then(res => {
        // console.log(res);
        if (res.errorCode == '0') {
          this.chong = Math.abs(res.data)
        }
      })
    }
  },
};
</script>

<style  scoped>
.row {
  margin: 30px 20px 0;
  border-radius: 5px;
  overflow: hidden;
}

.row /deep/ .van-grid-item {
  border: 1px solid #000;
  border-right: 0px;
}
.row /deep/ .van-grid-item__content {
  height: 80px;
  background-color: #000;
  color: orange;
  font-size: 14px;
}
.row /deep/ .van-grid-item__content::after {
  content: none;
}
</style>